<template>
  <div style="padding: 20px 0">
    <el-form inline style="text-align: left">
      <el-form-item
        v-for="(item, index) in queryConfig"
        :key="index"
        :label="item.label"
        inline
        :style="{ width: item.width ? item.width : '240px' }"
      >
        <!-- 时间范围 -->
        <el-date-picker
          v-model="queryForm[item['queryKey']]"
          v-if="item.isRange"
          type="datetimerange"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          :default-time="['00:00:00']"
        >
        </el-date-picker>
        <!-- 日期选择 -->
        <el-date-picker
          v-model="queryForm[item['queryKey']]"
          placeholder="选择日期"
          v-if="item.isDate"
          value-format="yyyy-MM-dd"
          type="date"
          style="width: 160px"
        />
        <!-- 下拉选择 -->
        <el-select
          v-if="item.isSelect"
          v-model="queryForm[item['queryKey']]"
          label-in-value
          style="width: 160px"
        >
          <el-option
            v-for="item in item.seletOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-input
          v-if="item.isInput"
          :type="item.type ? item.type : 'text'"
          v-model="queryForm[item['queryKey']]"
          style="width: 160px"
        />
      </el-form-item>
      <!-- 查询按钮如果需要独占一行 -->
      <div v-if="btnList.length && btnLine">
        <el-button
          class="query-btn"
          v-for="item in btnList"
          :style="{
            background: item.type === 'search' ? '#1890FF' : '',
            color: item.type === 'search' ? '#fff' : '#333',
          }"
          :key="item.type"
          @click="handleQueryClick(item.type)"
          >{{ item.label }}</el-button
        >
      </div>
      <!-- 查询按钮紧接搜索后面 -->
      <el-button
        v-else-if="btnList.length"
        class="query-btn"
        v-for="item in btnList"
        :style="{
          background: item.type === 'search' ? '#0B4E9E' : '',
          color: item.type === 'search' ? '#fff' : '#333',
        }"
        :key="item.type"
        @click="handleQueryClick(item.type)"
        >{{ item.label }}</el-button
      >
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      current: "",
    };
  },
  props: {
    queryConfig: {
      type: Array,
      default: () => [],
    },
    queryForm: {
      type: Object,
      default: () => ({}),
    },
    btnList: {
      type: Array,
      default: () => [
        { type: "search", label: "查询" },
        { type: "reset", label: "重置" },
      ],
    },
    btnLine: "",
  },
  methods: {
    handleQueryClick(val) {
      if (val == "search") {
        if (this.queryForm.startDate && this.queryForm.endDate) {
          if (
            new Date(this.queryForm.startDate).getTime() >
            new Date(this.queryForm.endDate).getTime()
          ) {
            return this.$message.warning("开始日期不能大于结束日期");
          }
        }
        if (this.queryForm.applyStartDate && this.queryForm.applyEndDate) {
          if (
            new Date(this.queryForm.applyStartDate).getTime() >
            new Date(this.queryForm.applyEndDate).getTime()
          ) {
            return this.$message.warning("申请开始日期不能大于结束日期");
          }
        }
        if (this.queryForm.arrivalStartDate && this.queryForm.arrivalEndDate) {
          if (
            new Date(this.queryForm.arrivalStartDate).getTime() >
            new Date(this.queryForm.arrivalEndDate).getTime()
          ) {
            return this.$message.warning("到账开始日期不能大于结束日期");
          }
        }
        if (this.queryForm.startAmount) {
          if (
            !/^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$/.test(
              this.queryForm.startAmount
            ) ||
            this.queryForm.startAmount == 0
          ) {
            return this.$message.warning("金额请输入大于0数字");
          }
        }
        if (this.queryForm.endAmount) {
          if (
            !/^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$/.test(
              this.queryForm.endAmount
            ) ||
            this.queryForm.endAmount == 0
          ) {
            return this.$message.warning("金额请输入大于0数字");
          }
        }
        if (this.queryForm.startAmount && this.queryForm.endAmount) {
          if (+this.queryForm.startAmount > +this.queryForm.endAmount) {
            return this.$message.warning("起始金额不能大于结束金额");
          }
        }
      }
      this.$emit("handleQueryClick", val);
    },
  },
};
</script>
<style scoped lang="less">
.query-btn {
  // width: 80px;
  // height: 40px;
  // line-height: 40px;
  // margin-right: 15px;
}
</style>
